<template>
  <div class="app-container detail">
    <el-row class="headline">
      <el-col :span="3">
        <span>放款登记</span>
      </el-col>
      <el-col :span="9" :offset="7">
        <el-steps align-center :space="100">
          <el-step title="初审" class="stepActive" />
          <el-step title="复审" class="stepActive" />
          <el-step title="终审" class="stepActive" />
          <el-step title="放款" class="stepActive" />
          <el-step title="还款" />
          <el-step title="完成" />
        </el-steps>
      </el-col>
      
      <el-col :span="1" :offset="1">
        <el-button size="small" :icon="ArrowLeft" @click="goBack">返回</el-button>
      </el-col>
    </el-row>
    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24"> 担保信息</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <!-- <el-form-item label="担保性质">
              <el-select v-model="formLabelAlign.region" placeholder="请选择">
                <el-option label="个人" value="个人" />
                <el-option label="对公" value="对公" />
              </el-select>
            </el-form-item> -->
            <el-form-item label="担保产品">
              <el-input v-model="formLabelAlign.loan_name" disabled/>
            </el-form-item>
            <el-form-item label="还款方式">
              <el-input v-model="formLabelAlign.method" disabled/>
            </el-form-item>
            <el-form-item label="申请金额">
              <el-input v-model="formLabelAlign.apply_quota" disabled>
                <template #append>
                  <span> 元</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="综合利率">
              <el-input v-model="formLabelAlign.approval_rate" disabled>
                <template #append>
                  <span> %</span>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="担保类型">
              <el-select v-model="formLabelAlign.loan_type" placeholder="请选择" disabled>
                <el-option v-for="dict in loanType" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="担保用途">
              <el-input v-model="formLabelAlign.purpose_name" disabled/>
            </el-form-item>
            <el-form-item label="担保期限">
              <el-select v-model="formLabelAlign.loan_stages" placeholder="请选择" disabled>
                <el-option label="6个月" value="6个月" />
                <el-option label="12个月" value="12个月" />
                <el-option label="18个月" value="18个月" />
                <el-option label="24个月" value="24个月" />
              </el-select>
            </el-form-item>
            <el-form-item label="审批金额">
              <el-input v-model="formLabelAlign.approval_amount" disabled>
                <template #append>
                  <span> 元</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="担保管理费">
              <el-input v-model="formLabelAlign.type" disabled>
                <template #append>
                  <span> %</span>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24">费用信息</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="综合利率">
              <el-input v-model="formLabelAlign.region" disabled/>
            </el-form-item>
            <el-form-item label="管理费">
              <el-input v-model="formLabelAlign.type" disabled/>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="服务费">
              <el-input v-model="formLabelAlign.region" disabled/>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24">审核信息</el-col>
      </el-row>
      <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">
        <el-table-column label="审核时间" align="center" prop="time" width="150" />
        <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="审核人员" align="center" prop="person" width="150"> </el-table-column>
        <el-table-column label="审核结果" align="center" prop="result" width="150"> </el-table-column>
        <el-table-column label="反馈详情" align="center" prop="detail" :show-overflow-tooltip="true" />
      </el-table>
    </div>

    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24">银行资料</el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="开户行">
              <el-input v-model="formLabelAlign.bankName" disabled/>
            </el-form-item>
            <el-form-item label="开户地">
              <el-input v-model="formLabelAlign.openingBranch" disabled/>
            </el-form-item>
            <el-form-item label="银行账号">
              <el-input v-model="formLabelAlign.cardNo" disabled/>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="11" :offset="1">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="户名">
              <el-input v-model="formLabelAlign.region" disabled/>
            </el-form-item>
            <el-form-item label="支行名称">
              <el-input v-model="formLabelAlign.openingBranch" disabled/>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div ref="borrow">
      <el-row class="bgc">
        <el-col :span="24">合同管理</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
            <el-form-item label="合同号">
              <el-input disabled v-model="file_name" />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="3" :offset="3" v-if="file_name && noShow"> <el-link type="primary" :href="`http://116.228.78.26:52800/${http_url}`" target="_blank">预览</el-link> </el-col>
        <el-col :span="3" v-if="file_name && noShow"> <el-link type="primary" :href="fileUrl" :underline="false" target="_blank">下载</el-link> </el-col>
        <el-col :span="3" :offset="2" v-if="!file_name && noShow"> <el-button type="warning" plain @click="createContract"> 生成合同</el-button></el-col>
        <el-col :span="3" v-if="isSave && noShow"> <el-button type="warning" plain @click="contractSave"> 保存</el-button></el-col>
      </el-row>
    </div>

    <!-- 预览界面 -->
    <el-dialog title="上传合同" v-model="preview.open" width="65%" top="100vh" append-to-body class="scrollbar">
      <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
        <el-form-item label="合同编号">
          <el-input v-model="formLabelAlign.region" />
        </el-form-item>
        <el-form-item label="上传文件">
          <FileUpload v-model="modelValue"></FileUpload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import { loanContractList } from "@/api/loanBefore";
import { bankCardDetail } from "@/api/afterLoan/index";
import { reactive, ref } from "vue";
import router from "@/router";
import { methodType, channelType, loanTypes } from "@/utils/dict";
const baseUrl = import.meta.env.VITE_APP_BASE_API;
import { loanContractUpload, loanContractSumbit } from "@/api/loanBefore";
import { contactDown } from "@/api/file";
const { proxy } = getCurrentInstance();

const uploadRef = ref();
const noShow = ref(true);
const route = useRoute();
const file_name = ref();
const file_path = ref();
const http_url = ref();
const fileUrl = ref();
const isSave = ref(false);
const jobList = ref([
  { time: "2022-02-03", status: "终审", person: "张某某", result: "审核通过", detail: "请安排放款 额度合同金额48000元期限36期综合利率1.0%" },
  { time: "2022-02-03", status: "复审", person: "张某某", result: "审核通过", detail: "请安排放款 额度合同金额48000元期限36期综合利率1.0%" },
  { time: "2022-02-03", status: "初审", person: "张某某", result: "审核通过", detail: "请安排放款 额度合同金额48000元期限36期综合利率1.0%" },
]);
const activeName = ref("1");
const loading = ref(false);
const labelPosition = ref("right");
const radio = ref(3);
const files = ref();
const modelValue = ref();
const state = reactive({
  formLabelAlign: {},
  preview: {
    open: false,
    data: {},
    activeName: "domain.java",
  },
});
const loanType = ref([
  {
    value: 1,
    label: "个人信用",
  },
  {
    value: 2,
    label: "个人分期",
  },
  {
    value: 3,
    label: "个人分期",
  },
  {
    value: 4,
    label: "个人抵押",
  },
  {
    value: 5,
    label: "企业信用",
  },
  {
    value: 6,
    label: "企业分期",
  },
  {
    value: 7,
    label: "企业租赁",
  },
]);
const { preview, formLabelAlign } = toRefs(state);

const handleClick = (tab, event) => {
  if (activeName.value == 5) {
    router.push("information");
  }
  console.log(activeName.value, "788787");
};
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.jobId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

function goBack() {
  proxy.$tab.closeOpenPage("contract");
}

const submitUpload = (val) => {
  console.log(modelValue.value, "22222");
  const data = {
    file: files.value,
  };
  // loanContractUpload(modelValue.value).tfileUrlhen((res) => {
  //   console.log(res, "上传成功");
  // });
  // console.log(uploadRef.value, "uploadRef.value");
};
/**生成合同编号*/
function createContract() {
  contactDown(route.query.appplyId).then((res) => {
    console.log(res);
    file_name.value = res.data.file_name;
    file_path.value = res.data.file_path;
    http_url.value = res.data.http_url;
    fileUrl.value = baseUrl + `/file/download?file_name=${encodeURIComponent(res.data.file_name)}&file_path=${res.data.file_path}`;
    isSave.value = true;
  });
}
/**合同保存提交*/
function contractSave() {
  loanContractSumbit({
    id: route.query.appplyId,
    contract_code: file_name.value,
    file_path: file_path.value,
  }).then((res) => {
    if (res.data) {
      isSave.value = false;
      proxy.$modal.msgSuccess("保存成功");
    }
  });
}
/**查看详细*/
function viewDetail() {
  loanContractList({
    page_count: 1,
    page_size: 10,
    id: route.query.appplyId, //担保编号
  }).then((res) => {
    console.log(res, "合同列表222");
    if (res.code == 200) {
      // state.jobList = res.data.list;
      if (res.data.list.length > 0) {
        file_name.value = res.data.list[0].contract_code;
        formLabelAlign.value = { ...res.data.list[0] };
        formLabelAlign.value.method = methodType(res.data.list[0].method);
        if (res.data.list[0].contract_code) {
          noShow.value = false;
        }
        getBankCardInfo(res.data.list[0].debit_card_id);
      }
    }
  });
}
/**获取银行卡信息*/
function getBankCardInfo(vl) {
  bankCardDetail(vl).then((res) => {
    console.log(res, "银行卡");
    formLabelAlign.value.bankName = res.data.bankName;
    formLabelAlign.value.openingBranch = res.data.openingBranch;
    formLabelAlign.value.cardNo = res.data.cardNo;
    formLabelAlign.value.openingBranch = res.data.openingBranch;
  });
}
const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles, "1111");
};

const handlePreview = (uploadFile) => {
  files.value = uploadFile;
  console.log(uploadFile, "22222", formLabelAlign);
};
viewDetail();
</script>
<style lang="scss" scoped>
.detail {
  overflow: hidden;
}
.detail:deep(.el-step__line) {
  background: #fff;
  opacity: 0;
}
:deep(.el-step__icon.is-text) {
  border: 1px solid;
}
:deep(.el-step__icon) {
  height: 14px;
  width: 14px;
}
:deep(.el-steps) {
  background: #f2f2f2;
  margin-top: 3px;
}
:deep(.el-step.is-horizontal) {
  display: flex;
  padding-right: 5px;
}
:deep(.el-step__title) {
  line-height: 20px;
}
:deep(.el-step__main) {
  white-space: nowrap;
}
:deep(.el-step__head.is-finish) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-finish) {
  color: #333;
}
:deep(.el-step__head.is-wait) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-wait) {
  color: #333;
}
:deep(.el-step__title.is-process) {
  color: #333;
  font-weight: 400;
}
:deep(.el-step__head.is-process) {
  font-weight: none;
  color: #333;
  border-color: #333;
}
.stepActive {
  background: black;
  :deep(.el-step__title) {
    line-height: 20px;
  }
  :deep(.el-step__title.is-finish) {
    color: #fff;
  }
  :deep(.el-step__title.is-wait) {
    color: #fff;
  }
  :deep(.el-step__title.is-process) {
    color: #fff;
    font-weight: 400;
  }
}
.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
:deep(.el-select) {
  width: 100%;
}
.headline {
  margin-bottom: 5px;
}
</style>
